<template>
 <div>
     <div>
    <div class="na">
    <div class="nav-wrap">
      <div class="item">全城
        <span class="drop"></span>
      </div>
      <div class="item">品牌
        <span class="drop"></span>
      </div>
      <div class="item">特色
        <span class="drop"></span>
      </div>
    </div>
    </div>
    
    
  </div>
     <div v-html="yingyuanList"></div>
 </div>
</template>

<script>
import axios from "axios"


export default {
    data: function(){
        return{
            yingyuanList:""
        }
    },
    mounted(){
        axios.get("ajax/moreCinemas?day=2021-07-03&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item=&updateShowDay=true&reqId=1625286586907&cityId=30&optimus_uuid=38C8A010D55911EB8EA841F6113CA2EF324B120B96D64DF680E7AD571B37599C&optimus_risk_level=71&optimus_code=10").then((res) => {
            this.yingyuanList = res.data
        })
    }
   
}
</script>

<style>
    .nav-wrap {
    width: 100%;
    height: 40px;
    /* z-index: 10; */
    background-color: #fff;
    display: flex;
    border-bottom: 1px solid #ccc;
}
.nav-wrap .item {
    -webkit-box-flex: 1;
    flex: 1;
    text-align: center;
    /* line-height: 40px; */
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    border-right: 1px solid #ccc;
    
}
.nav-wrap .item .drop {
    display: inline-block;
    position: absolute;
    top: 18px;
    width: 0;
    height: 0;
    margin-left: 4px;
    border: 4px solid transparent;
    border-top-color: #b0b0b0;
}
.item {
  padding: 13px 15px 13px 0;
  margin-left: 15px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}
.title-block {
  display: block;
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
}
.title-block .title {
  height: 23px;
  line-height: 23px;
  font-size: 16px;
  color: #000;
  
}
.price-block {
  padding-top: 9px;
  padding-left: 3px;
}
.location-block {
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}
.flex {
  -webkit-box-flex: 1;
  flex: 1;
}
.title-block .label-block {
  height: 17px;
  line-height: 17px;
  margin-top: 4px;
  margin-bottom: 4px;
  overflow: hidden;
  font-size: 0;
  flex-shrink: 0;
}
.title-block .label-block div.allowRefund,
.title-block .label-block div.endorse,
.title-block .label-block div.hallType,
.title-block .label-block div.sell {
  color: #589daf;
  border: 1px solid #589daf;
}
.title-block .label-block div.snack,
.title-block .label-block div.vipTag {
  color: #f90;
  border: 1px solid #f90;
}

.discount-block {
  color: #999;
  margin-bottom: 4px;
}
.discount-block .discount-label {
  width: 15px;
  height: 14px;
  position: relative;
  top: 3px;
}
.discount-block .discount-label-text {
  margin-left: 0;
  font-size: 11px;
}
.line-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.discount-label {
  width: 15px;
  height: 14px;
  position: relative;
  top: 3px;
}
.title-block .label-block > div {
  position: relative;
  display: inline-block;
  padding: 0 3px;
  height: 15px;
  line-height: 15px;
  border-radius: 2px;
  font-size: 12px;
}
.cinema-list .discount-block .discount-label {
  width: 15px;
  height: 14px;
  position: relative;
  top: 3px;
}
 .title-block .label-block>div+div {
    margin-left: 5px;
}
.discount-label img {
    width: 100%;
}
.discount-label {
    display: -webkit-inline-box;
    display: inline-flex;
}
.discount-label-text {
    display: inline-block;
    margin-left: 8px;
    font-size: 13px;
}
</style>